<template>
  <div class="main">
    <div class="air-column">
      <h2>剩机人</h2>
      <el-form class="member-info">
        <div class="member-info-item" v-for="(item,index) in from.users" :key='index'>

          <el-form-item label="乘机人类型">
            <el-input placeholder="姓名" v-model="item.username" class="input-with-select">
              <el-select slot="prepend" value="1" placeholder="请选择">
                <el-option label="成人" value="1"></el-option>
              </el-select>
            </el-input>
          </el-form-item>

          <el-form-item label="证件类型">
            <el-input placeholder="证件号码" v-model="item.id" class="input-with-select">
              <el-select slot="prepend" value="1" placeholder="请选择">
                <el-option label="身份证" value="1" :checked="true"></el-option>
              </el-select>
            </el-input>
          </el-form-item>

          <span class="delete-user" @click="handleDeleteUser(index)">-</span>
        </div>
      </el-form>

      <el-button class="add-member" type='primary' @click="handleAddUsers">添加乘机人</el-button>
    </div>

    <div class="air-column">
      <h2>保险</h2>
      <div>
        <div class="insurance-item" v-for="(item,index) in infoData.insurances" :key='index'>
          <el-checkbox :label="`${item.type}：￥${item.price}/份×1
                    最高赔付${item.compensation}`" @change="handleInsurance(item.id,index)"
            border>
          </el-checkbox>
        </div>
      </div>
    </div>

    <div class="air-column">
      <h2>联系人</h2>
      <div class="contact">
        <el-form label-width="60px">
          <el-form-item label="姓名">
            <el-input v-model="from.contactName"></el-input>
          </el-form-item>

          <el-form-item label="手机">
            <el-input placeholder="请输入内容" v-model="from.contactPhone">
              <template slot="append">
                <el-button @click="handleSendCaptcha">发送验证码</el-button>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item label="验证码">
            <el-input v-model="from.captcha"></el-input>
          </el-form-item>
        </el-form>
        <el-button type="warning" class="submit" @click="handleSubmit">提交订单</el-button>
      </div>
    </div>
    <span v-show="false">
      {{zongjia}}
    </span>
  </div>

</template>

<script>
  export default {
   

    data() {
      return {
        from: {
          users: [{
            username: '',
            id: ''
          }],
          // api文档
          insurances: [], //保险id
          contactName: '', //联系人名字
          contactPhone: '', //联系人电话
          captcha: '000000', //手机验证码
          invoice: true, //是否需要发票 默认需要
          seat_xid: '', // 座位ID
          air: '', //航班ID
        },

        //当前机票的信息
        infoData: {},
      }
    },
    methods: {
      // 添加乘机人
      handleAddUsers() {
        this.from.users.push({
          username: '',
          id: ''
        })
      },

      // 移除乘机人
      handleDeleteUser(index) {
        this.from.users.splice(index, 1)
      },

      //保险提交
      handleInsurance(id, index) {
        if (this.from.insurances.indexOf(id) > -1) {
          this.from.insurances.splice(index, 1)
        } else {
          this.from.insurances.push(id)
        }
      },
      // 发送手机验证码
      async handleSendCaptcha() {
        if (!this.from.contactPhone) {
          this.$message.error('请输入手机号')
          return
        }
        const code = await this.$store.dispatch('user/sendCaptcha', this.from.contactPhone);
        this.$message.success('模拟手机验证码' + code)
      },

      // 提交订单
      handleSubmit() {
        const {
          id: air,
          seat_xid
        } = this.$route.query
        this.from = {
          ...this.from,
          air,
          seat_xid
        }
        this.$axios({
          url: '/airorders',
          method: 'post',
          data: this.from,
          headers: {
            Authorization: "Bearer " + this.$store.state.user.userInfo.token
          }
        }).then(res => {
          console.log(res);
		  const {id} =res.data.data
		  this.$router.push({
			  path:'/air/pay',
			  query:{
				  id
			  }
		  })
        })
        // console.log(this.from);
      }
    },
    computed: {
      //计算总金额
      zongjia() {
        if (!this.infoData.seat_infos) return;
        // 总金额
        let price = 0;
        //单价
        price += this.infoData.seat_infos.org_settle_price;
        // 基建燃油费
        price += this.infoData.airport_tax_audlet;
        // 保险
        price += this.from.insurances.length * 30;
        // 乘以人数
        price *= this.from.users.length;

        // 保存到仓库
        this.$store.commit('air/setallprice', price)
        console.log(price);
        return "";
      }
    },

    mounted() {
      // console.log(this.$store.query);
      const {
        id,
        seat_xid
      } = this.$route.query
      this.$axios({
        url: '/airs/' + id,
        params: {
          seat_xid
        }
      }).then(res => {
        console.log(res.data);

        this.infoData = res.data
        //保存到仓库 store
        this.$store.commit("air/setInfoData", res.data);
      })
    },


  }
</script>

<style scoped lang="less">
  .air-column {
    border-bottom: 1px #ddd dashed;
    padding-bottom: 20px;
    margin-bottom: 20px;
  }

  .air-column h2 {
    margin-bottom: 20px;
    font-size: 22px;
    font-weight: normal;
  }

  /deep/ .el-select .el-input {
    width: 130px;
  }

  .input-with-select {
    width: 590px;
  }

  .input-with-select /deep/ .el-input-group__prepend {
    background-color: #fff;
  }

  .member-info /deep/ .el-form-item {
    margin-bottom: 0;
  }

  .member-info-item {
    border-bottom: 1px #eee dashed;
    padding-bottom: 20px;
    position: relative;

    &:first-child {
      .delete-user {
        display: none;
      }
    }
  }

  .add-member {
    margin-top: 20px;
  }

  .delete-user {
    display: block;
    background: #ddd;
    width: 16px;
    height: 16px;
    font-size: 14px;
    text-align: center;
    line-height: 16px;
    color: #fff;
    cursor: pointer;
    border-radius: 50px;
    position: absolute;
    right: -30px;
    top: 50%;
  }

  .insurance {
    >div {
      margin-top: 10px;
    }
  }

  .insurance-item {
    margin-bottom: 20px;
  }

  .contact {
    /deep/ .el-input {
      width: 50%;
    }
  }

  .submit {
    margin: 50px auto;
    display: block;
    width: 250px;
    height: 50px;
  }
</style>
